<template>
	<view class="check body window">
		<!--  -->
		<u-navbar :border-bottom='false' title="我的审核" :background="{}" @custom-back='customBack'></u-navbar>
		
		<u-grid :border="false" :col="tabsList.length" @click='eventTab()'>

			<u-grid-item bg-color='inherit' v-for="(item,index) in tabsList" :index='index' :key="index">
				<u-icon :name="item.icon" custom-prefix="custom-icon" size="80" :color="index==tabCurrent?'#fa3534':''" ></u-icon>
			<!-- 	<u-icon name="list" :size="size" :color="index==tabCurrent?'#fa3534':''"></u-icon> -->
				<view class="grid-text" :style="{color: index==tabCurrent?'#fa3534':''}">{{item.name}}</view>
			</u-grid-item>

		</u-grid>
		<u-tabs :bg-color="{}" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="tabBox">
			<scroll-view scroll-y="true" style="height: 100%;" lower-threshold='10' @scrolltolower='scrolltolowerZ'>
				<block v-for="(item,index) in listZ" :key='index' >
					<view class="minbox " @click="routerDetail(item)">
						<view class="topBox">
							<view class="left">
								<view class="font-big"><text class=" font-weight pr-2">类型: </text>{{item.type_text}}
								</view>
								<view class="font-big"><text
										class="font-weight  pr-2">审批描述:</text><text>{{item.describe}}</text></view>
								<view class="font-big"><text
										class=" font-weight pr-2">创建时间:</text><text>{{item.create_time}}</text></view>
							</view>
							<view class="right">
								<u-tag :text="item.status_text" :type="tag(item.status)" />
							</view>
						</view>
						<view class="buttBox">
							<text>审核通过时间:2020-10-10</text>
						</view>
					</view>
				</block>
				<view class="mt-5">
					<u-loadmore :status="statusZ" />
				</view>
			</scroll-view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusZ: 'loadmore',
				size: 100,
				
				listZ: [],
				tabsList: [{
						name: '全部',
						icon:  'quanbu'

					},
					{
						name: '待审核',
						icon: 'daishenhe'
					},
					{
						name: '通过',
						icon: 'tongguo'
					},
					{
						name: '驳回',
						icon:  'bohui'
					},

				],
				list: [{
					name: '付款申请'
				}, {
					name: '垫资申请'
				}],
				current: 0,
				tabCurrent: 0,
				
				// 分页
				page: 1,
				// 控制加载
				isLoad:true,
				
			}
		},
		onLoad(e) {
			this.$minApi.approvalList({
				page: this.page,
				status: this.Fystatus,
				type: this.current + 1
			}).then(res => {
				this.listZ = res.data
				this.page+=1
			})
			this.backType=e.backType
		},
		watch: {
			tabCurrent(newValue, oldValue) {
				console.log('我触发了1');
				 this.page=1
				 this.listZ=[]
				  this.isLoad=true
			  this.$minApi.approvalList({
			  	page: this.page,
			  	status: this.Fystatus,
			  	type: this.current + 1
			  }).then(res => {
			  	this.listZ = res.data
			  	this.page+=1
			  })
			},
			current(newValue, oldValue) {
					console.log('我触发了2');
			 this.page=1
			 this.listZ=[]
			 this.isLoad=true
			  this.$minApi.approvalList({
			  	page: this.page,
			  	status: this.Fystatus,
			  	type: this.current + 1
			  }).then(res => {
			  	this.listZ = res.data
			  	this.page+=1
			  })
			},
			
		},
		computed: {
			Fystatus() {
				if (this.tabCurrent == 1) return 2
				else if (this.tabCurrent == 2) return 3
				else if (this.tabCurrent == 3) return 4
				else return 0
			},
			
		
		},

		methods: {
			customBack(){
				if(backType){
					this.$u.route('/page/index/index')
				}else{
					this.$u.route({type:'back'})
				}
			},
			scrolltolowerZ(){
				this.$u.throttle(this.scrolltolower, 1000)
			},
		 async scrolltolower() {
				 if(!this.isLoad ) return 
				this.statusZ = 'loading';
				console.log('触发了');
				let data =await this.$minApi.approvalList({
					page: this.page,
					status: this.Fystatus,
					type: this.current + 1
				})
				if(data.data.length==0){
						this.statusZ = 'nomore'
						this.isLoad= false
						return
					}
					this.listZ = [...this.listZ,...data.data]
					this.page +=1
			},
			eventTab(e) {
				this.tabCurrent = e
				this.current = 0
			},
			change(index) {
				this.current = index;
			},
			tag(e) {
				if (e <= 2)
					return 'primary'
				else if (e == 3)
					return "error"
				else
					return "success"
			},
			routerDetail(item) {
				this.$u.route('pages/detail/index', {
					msg_id: item.msg_id
				})
				// console.log("e: ",e);
			}
		}
	}
</script>

<style lang="scss">
	.body {
		height: 100vh;
		margin: 0;
		// padding: 0 20rpx;
		font-family: "montserrat";
		background-image: linear-gradient(125deg, #CB9FFE, #5894F7, #ABCDFA, #74A3F6, #CB9FFE);
		background-size: 400%;
		animation: bganimation 15s infinite;
	}

	page,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}

	.grid-text {
		background-color: inherit;
		font-size: 28rpx;
		margin-top: 4rpx;
		// color: $u-type-info;
		
	}

	@keyframes bganimation {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}

	}

	.tabBox {
		width: 95%;
		margin: 50rpx auto;
		border-radius: 10rpx;
		height: 800rpx;

		background-color: #FFFFFF;

	}

	.tabBox {
		padding: 20rpx;

		.minbox {
			border-bottom: 1rpx #cececd solid;
			margin-top: 10rpx;

			.topBox {
				display: flex;

				.left {
					flex: 1;

					view {
						margin: 20rpx 0;

					}
				}

				.right {

					.u-tag {

						font-size: 30rpx;
					}
				}
			}

			.buttBox {
				text-align: right;
				color: $u-type-info;
			}
		}

	}
</style>
